<template>
  <div
    :class="[
      classPrefix,
      `${classPrefix}__${type}`,
      dashed && `${classPrefix}__dashed`,
    ]"
    :style="style"
  >
    <span
      v-if="$slots.default"
      :class="[
        `${classPrefix}__text`,
        `${classPrefix}__text--${contentPosition}`,
      ]"
    >
      <slot></slot>
    </span>
  </div>
</template>

<script>
import Config from "/src/config";
    export default {
        name:'Divider',
        props:{
            //水平垂直
            type:{
                type:String,
                default:'horizontal',
                validator(val){
                    return ['horizontal', 'vertical'].indexOf(val) !== -1;
                }
            },
            //文字位置
            contentPosition:{
                type:String,
                default:'center',
                validator(val){
                    return ['left','center','right'].indexOf(val) !==-1;
                }
            },
            //分割线颜色
            color:{
                type:String,
                default:''
            },
            //是否虚线
            dashed:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                classPrefix: Config.classPrefix + "-divider",
            }
        },
        computed:{
            style(){
                let style = {};
                if (this.dashed) {
                    style.background='0 0';
                     if (this.color) {
                    style.borderTop = `1px dashed ${this.color}`
                }
                }else if (this.color){
                    style.background = this.color
                }
                return style
            }
        }

    }
</script>